<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>工作人员联系人</title>
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
		<style type="text/css">
			body{
				overflow-y: hidden;
			}
			.add_tb {
				width: 26px;
				height: 26px;
				margin: 0 0 0 10px;
			}

			.delete_tb {
				width: 26px;
				height: 26px;
				margin: 0 0 0 10px;
			}
		#dv {
					background-color: white;
					width: 96%;
					margin: 20px 20px auto;
				}
			</style>
		</head>
		<body bgcolor="whitesmoke">
			<div id="dv">
				</br>
				&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-service" style="width: 150px;height: 100px;"><b>工作人员</b></i>
				</br></br>
			</div>
		<div id="toolBar" style="display: none;">
<!--			<div class="layui-btn-group">-->
<!--				<button type="button" class="add_tb " lay-event="add"><i class="layui-icon">&#xe654;</i></button>-->
<!--				<button type="button" class="delete_tb" lay-event="delete" ><i-->
<!--					 class="layui-icon">&#xe640;</i></button>			-->
<!--			</div>-->
		</div>
		
		<!--每一行后面的删除和修改按钮-->
		<div style="display: none" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit" id="update_tc">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="singleDel">删除</a>
		</div>

		<!--id 给js或者jQuery使用的-->
		<table id="demo" lay-filter="test"></table>
		<script src="../../js/jquery3.js"></script>
		<script src="../../layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(["table", "layer"], function() {
				var table = layui.table;
				var layer = layui.layer;
				//第一个实例
				table.render({
					elem: '#demo',
					height: 540,
					toolbar: "#toolBar",
					url: '/contact/findWorkAllPage' //数据接口
						,
					page: {
						theme: '#77aa96'
					} //开启分页
					,cellMinWidth: 110,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'w_name',
							title: '工作人员姓名',
							sort: true,
							fixed: 'left'
						}, {
							field: 'w_address',
							title: '工作人员住址'
						}, {
							field: 'w_tel',
							title: '工作人员电话'
						}, {
							field: 'w_post',
							title: '工作人员权限',
						
						}, {
							field: 'w_number',
							title: '负责客户数量',}
							
						// },  {
						// 	fixed: 'right',
						// 	title: '操作',
						// 	toolbar: '#barDemo',
						// 	width: 150
						// }
						]
					]
				});

				//监听每一行的操作
				table.on("tool(test)", function(obj) {
					var event = obj.event;
					if (event == 'edit') {
						layer.open({
							type:2,
							title:'修改信息',
							shadeClose:true,
							shade:0.8,
							area:['700px','90%'],
							shadeClose:false,
							content:'edit.html'
						});
					} else if (event == 'singleDel') {
						layer.confirm('Are you sure you want to delete it?', function(index) {
							var data = obj.data;
							obj.del();
							layer.close(index);
							$.ajax({
								url:"/contact/del?w_name="+data.w_name,
								dataType:"json",
								contentType:"application/json;charset=utf-8",
								type:"get",
								success:function(data){

								}
							})
						});
					}


				});

				//监听头部工具栏的点击
				table.on('toolbar(test)', function(obj) {
					switch (obj.event) {
						case 'add':
							layer.open({
								type:2,
								title:'添加信息',
								shadeClose:true,
								shade:0.8,
								area:['700px','90%'],
								shadeClose:false,
								content:'addinfo.html'
								
							})
							break;
						case 'delete':
							break;
						case 'update':
							break;
					}	

				});

			})



			function dele() {
				layer.msg("删除")
			}

			function add() {
				// layer.msg("添加")
			}

			function update() {
				layer.msg("编辑")
			}

			function singleDel(c_id, table) {
				$.ajax({
					url: "operation",
					data: {
						action: "singleDel",
						id: c_id
					},
					type: "GET",
					dateType: "json",
					success: function() {
						table.reload("demo")
					}
				});
			}
		</script>
	</body>
</html>
